

<template>
    <div class="sdy-home">
<!-- home 的顶部插槽 内容  SdyHeader依然按照头部位置书写 -->
        <SdyHeader title="啥都没有">
        <!-- 这里的#是与具名插槽相对应 -->
            <template #left>
                <van-icon class="cate-icon" name="orders-o"/>
            </template>
            <template #title>
                <van-search shape="round"  @focus="SearchHandler"  background="#4fc08d" placeholder="请输入搜索关键词" />
            </template>
            <template #right>
                <span v-if="isLogin">{{username}}</span>
                <router-link v-else to="/login">登录</router-link>
            </template>
<!-- 组件写插槽时会在自己的组件内写上template =>slot 
在页面也用 template #具名 + 具名插槽 -->
     
        </SdyHeader>

    <!-- 书写home部分轮播图 -->
    <SdyHomeBannerVue/>

    <!-- 书写导航分布  -->
    <SdyHomeNavList></SdyHomeNavList>

    <!-- 书写秒杀导航 -->
    <SdyHomeHot></SdyHomeHot>
    
    </div>
</template>

<script setup lang="ts">
// 引入轮播图
import SdyHomeBannerVue from '@/views/SdyHome/components/SdyHomeBanner.vue';
// 引入导航图
import SdyHomeNavList from './components/SdyHomeNavList.vue';
// 引入热卖商品
import SdyHomeHot from './components/SdyHomeHot.vue';
// 拿到编程式导航的路由控制器
import { useRouter , type Router } from 'vue-router';

import {ref,onMounted} from 'vue'
import {getUserInfoApi} from '@/api/users'

const $router:Router = useRouter()

//点击跳转到搜索路由
const SearchHandler = ()=>{
    // console.log($router)
    $router.push('/search')
}


// 逻辑
// 登录按钮应该显示什么 ?
// 如果你登陆过, 我应该显示昵称
// 如果你没有登录, 显示登录按钮


// 准备一个变量表示是否登陆过
const isLogin = ref<boolean>(false)
const username = ref<string>('xmz')


// 1. 验证 token
const testToken = async () => {
  // 1-1. 从 localStorage 内获取 token 和 user_id
  // 如果没有, 说明没有登录过 没有就要登录 有的话token请求在拦截器带过去
  const token = window.localStorage.getItem('token')
  const user_id = window.localStorage.getItem('user_id')
  if (!token || !user_id) {
    // 少一个都是false 显示登录
    isLogin.value = false
    return
  }

  // 如果有, 说明你曾经登录过(不能保证是否过期, 不能保证是否被伪造)
  // 1-2. 根据 user_id 和 token 去请求用户详细信息
//   这里请求的user_id  token放在拦截器请求
  const res = await getUserInfoApi(user_id)
//   console.log(res)

// 判断结果 
if (((res as unknown) as { code: string }).code === '10019') {
    isLogin.value = false
    return 
}

// 表示登陆过
isLogin.value = true
// username.value = res.data[0].username
}

onMounted(()=>{
    // 打开前就要执行一次
    testToken()
}
)



</script>

<style scoped lang="scss">
.cate-icon {
  font-size: 24px;
  color: orange;
}
</style>